/**
 * @class Ext.Mask
 */

@keyframes spin {
    0% {
			transform: rotate(0deg);
    }
    
    100% {
			transform: rotate(360deg);
    }
}

@-webkit-keyframes webkit-spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    
    to {
        -webkit-transform: rotate(360deg);
    }
}

.x-mask .x-mask-inner {
    width: 50%;
    @include st-box();
    @include st-box-pack(center);
    @include st-box-align(center);
    background-color: transparent;
}

.x-mask.x-loading-mask {
	background-color: rgba(255,255,255,.75);
}

.x-mask .x-loading-spinner-outer {
    position: relative;
    height: auto;
}

.x-mask.x-has-message .x-loading-spinner-outer {
	height: 168px;
}

$spinnerSize: 64px;

.x-loading-spinner, .x-mask.x-has-message .x-loading-spinner-outer {
    width: $spinnerSize;
    height: $spinnerSize;
    min-width: $spinnerSize;
}

// SVG For Spinner converted to base64 and used below
/*
    <?xml version="1.0" encoding="utf-8"?>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 155 155" enable-background="new 0 0 155 155" xml:space="preserve">
        <g id="Layer_1">
        <circle fill="none" stroke="#969696" stroke-width="6" stroke-miterlimit="10" cx="77.5" cy="77.5" r="74.5"/>
        </g>
        <g id="Layer_2">
            <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="40.25" x2="80.5" y2="40.25">
            <stop  offset="4.000000e-02" style="stop-color:#969696"/>
            <stop  offset="5.740377e-02" style="stop-color:#8E8E8E"/>
            <stop  offset="0.1465" style="stop-color:#686868"/>
            <stop  offset="0.2428" style="stop-color:#484848"/>
            <stop  offset="0.3461" style="stop-color:#2E2E2E"/>
            <stop  offset="0.4592" style="stop-color:#191919"/>
            <stop  offset="0.5871" style="stop-color:#0B0B0B"/>
            <stop  offset="0.7422" style="stop-color:#030303"/>
            <stop  offset="1" style="stop-color:#000000"/>
            </linearGradient>

            <path fill="none" stroke="url(#SVGID_1_)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
                    M3,77.5C3,36.4,36.4,3,77.5,3"/>
        </g>
    </svg>
*/
.x-loading-spinner {
    background-image: url('');
    background-repeat:no-repeat;
    background-position:top left;
    width: $spinnerSize;
    height: $spinnerSize;
    background-size: 100%;
    -webkit-animation: webkit-spin 1s infinite linear;
    animation:spin 1s infinite linear;
}
